<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹弹弹</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        canvas {
            background-color: #0f0877;
            display: block;
            margin: 0px auto;
        }
    </style>
</head>

<body>
    <canvas width="475" height="320" id="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //球半径
        var ballRadius = 10;
        // 球初始位置
        var x = canvas.width / 2;
        var y = canvas.height - 30;

        // 定义定时器？
        var timer = null;

        //定义分数
        var score = 0;
        //球的移动
        var dx = 2;
        var dy = -2;

        //绘制挡板
        var padlwidth = 75;
        var padlheight = 10;
        //挡板的x的位置
        var padlX = (canvas.width - padlwidth) / 2;

        //绘制钻块行、列
        var brickRowCount = 3;
        var brickColCount = 5
        //钻块之间的距离
        var brickPadding = 10;
        //钻块的大小
        var brickWidth = 75;
        var brickheight = 20;

        //整体钻块距离画布上边和左边的距离
        var brickOffsetLeft = 30;
        var brickOffsetTop = 30;

        var bricks = [];
        for (var r = 0; r < brickRowCount; r++) {
            bricks[r] = [];
            for (var c = 0; c < brickColCount; c++) {
                bricks[r][c] = {
                    x: 0,
                    y: 0,
                    starts: 1
                }
            }
        }
        console.log(bricks)
        //绘制小球
        function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#e82a17";
            ctx.closePath;
            ctx.fill();
        }
        drawBall();


        //绘制挡板
        function drawPadl() {
            ctx.beginPath();
            ctx.rect(padlX, canvas.height - padlheight, padlwidth, padlheight);
            ctx.fillStyle = "#e82a17";
            ctx.closePath();
            ctx.fill();
        }

        //绘制钻块
        function drawBrick() {
            for (var r = 0; r < brickRowCount; r++) {
                for (var c = 0; c < brickColCount; c++) {
                    if (bricks[r][c].starts == 1) {
                        //每一个钻块的位置信息
                        var brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
                        var brickY = r * (brickheight + brickPadding) + brickOffsetTop;

                        bricks[r][c].x = brickX;
                        bricks[r][c].y = brickY;

                        //绘制钻块
                        ctx.beginPath();
                        ctx.rect(brickX, brickY, brickWidth, brickheight);
                        ctx.fillStyle = "#e82a17";
                        ctx.closePath();
                        ctx.fill();
                    }

                }
            }
        }
        //绘制分数
        function drawScore() {
            ctx.font = '16px';
            ctx.fillStyle = 'yellow';
            ctx.fillText('Score:' + score, 0, 20);
        }

        //鼠标移动
        document.addEventListener('mousemove', mouseMoveHander, false);
        function mouseMoveHander(e) {
            var ax = e.clientX - canvas.offsetLeft;
            if (ax > 0 && ax < canvas.width) {
                padlX = ax - padlwidth / 2;
            }
        }
        //碰撞
        function duang() {
            for (var r = 0; r < brickRowCount; r++) {
                for (var c = 0; c < brickColCount; c++) {
                    var b = bricks[r][c];
                    if (b.starts == 1) {
                        if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickheight) {
                            dy = -dy;
                            b.starts = 0;
                            score++;
                            if (score == brickRowCount * brickColCount) {
                                clearInterval(timer);
                                alert("恭喜过关！！！");
                            }
                        }
                    }
                }
            }
        }

        //绘制主方法
        function draw() {
            //清除初始坐标
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();
            drawPadl();
            drawBrick();
            duang();
            drawScore();

            // 判断球的临界值
            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx;
            }
            if (y + dy < ballRadius) {
                dy = -dy;
            } else if (y + dy > canvas.height - ballRadius) {
                //判断小球是否被接住
                if (x > padlX && x < padlX + padlwidth) {
                    dy = -dy;

                } else {
                    alert("失败");
                    clearInterval(timer);
                }
            }

            x += dx;
            y += dy;
        }
        timer = setInterval(draw, 10);

    </script>
</body>

</html>